header {
    box-sizing: border-box;
    width:100%;
    z-index:1000;
    box-shadow:0 0 1em rgba(0,0,0,0.5);
   
}

header nav {
    background-color: var(--white);
    position:relative;
}

.header-wrapper{
    max-width:1920px;
    margin:auto;
    position:relative;
    padding:0.25em var(--space);
    display:grid;
    grid-template-columns:50% auto;
    align-items:center; 
    box-sizing:content-box;
}

.site-title {
    background-repeat: repeat;
    font-weight: 400;
    font-size: 1em;

}
.site-title a{
    font-size:2.25em;
    z-index: 0;
    transition: all linear 0.2s;
    align-items:center;
    display:inline-flex;
    text-align:center;
    margin:auto;
    font-weight:500;
    letter-spacing:-1px;

}

.site-title a #l-title {
        text-align:right;
}
.site-title a #r-title {
        text-align:left;
}
.site-title a #logo{
    position: relative;
    transition: all linear 0.2s;
    text-align:center;
    margin-right:0.5em;
}
.site-title a #logo img{
    width:80px;
    z-index: 1000;
    transition: all linear 0.2s;
    position:relative;
    top:5px;
    
}
.site-title a #slogan {
    font-size:18px;
    display:block;
    text-align:left;
    font-weight:300;
    opacity:0.1;
    transition:linear all 0.2s;
    height:1em;
    margin-bottom:0.5em;
    position:relative;
    letter-spacing:1px;
}


.top-menu {
    font-size: 1.25em;
    padding: 0.5em 0;
    display:grid;
    grid-template-columns:auto 48px;
    grid-gap:5px;
    align-items:center;
}
.top-menu .items-wrapper{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
    text-align:right;
    margin:0 -0.25em;
}
.top-menu .items-wrapper a{
    display:block;
    transition:all linear 0.2s;
    padding: 0.25em 0.5em;
    position:relative;
    color:#444;
    font-weight:100;
    font-size:0.75em;
    border-radius:5px;
}
.top-menu .menu-wrapper {
    display:grid;
    align-content:center;
    align-items:center;
}
.top-menu .items-wrapper a:hover{
    background-color:rgba(0,0,0,0.325);
}
.top-menu .border-bottom{
    position:relative;
    margin-bottom:3px;
}
.top-menu .border-bottom:after{
    position:absolute;
    right:0.325em;
    width:75%;
    background-image:linear-gradient(223deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 100%); 
    display:block;
    content:'';
    z-index:100;
    height:1px;
    bottom:-2px;

}

.top-menu ul{
    padding:0;
    margin:0;
}
.top-menu ul>li{
    display:inline-block;
}



@media (min-width:1920.1px) {
     
    .site-title {
        padding:0.25em;
        box-sizing:content-box;
    }
}
@media (max-width:1360px) {
    .top-menu{
        font-size:1.125em;
    }
    .site-title a{
        font-size:1.875em;
    }
    .site-title a #logo img{
        width:64px;
    }
    .site-title a #slogan{
        font-size:14px;
    }


}
@media (min-width:1024.1px) {
   .department .mt-nav-mobile {
        display:none;
    }
}
@media (max-width:1024px) {
    header{
        position:relative;
        box-shadow:none;
        margin-bottom:3px;
    }
    .header-wrapper {
        display:block;
        padding: 0;
    }
    header .main nav{
        border-bottom-width:0;
    }
    .site-title{
        padding:0.5em var(--space);
    }
    .site-title a {
        font-size: 28px;
    }
  
 

    .top-menu {
        position:absolute;
        display:block;
        right:var(--space);
        top:0.75em;
    }
    .top-menu .items-wrapper{
        display:none;
    }
    .top-menu .border-bottom:after{
        width:100%;
        background-image:linear-gradient(0, rgba(255,255,255,0.125) 0%, rgba(255,255,255,0.125) 100%)
    }
    .top-menu ul{
        text-align:center;
    }

    .department .mt-menu {
        position: relative;
    }

    #mt-btn-main-menu {
        display: inline-block;
        transform: scale(75%);
    }
}
@media (max-width:720px) {
    .site-title {
        font-size:20px;
    }
   
    .top-menu {
       
    }
    .top-menu .items > li > a {
        padding:0.5em;
    }
}
@media (max-width:480px) {


    .site-title a {
        font-size: 16.5px;
        letter-spacing: -0.5px;
        padding: 0.325em 0;
        margin: auto;
    }
    .site-title a #logo img{
        width:48px;
        top:2px;
    }
    .site-title a #slogan{
        font-size:10px;
    }
    .top-menu {
        font-size:0.8em;
    }
   


 
}